<script lang="ts" setup="">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

let { width, height, prop } = defineProps({
    width: {
        type: String,
        default: '900px'
    },
    height: {
        type: String,
        default: '400px'
    },
    prop: {
        type: Object,
        required: true
    }
})

const myEcharts = echarts,
    myChart = ref<HTMLElement>()

onMounted(() => {
    initChart()
})

function initChart() {
    let chart = myEcharts.init(myChart.value as unknown as HTMLElement)
    chart.setOption(prop)
    window.onresize = function () {
        chart.resize()
    }
}
</script>

<template>
    <div
        ref="myChart"
        id="myChart"
        :style="{ width, height }"
    ></div>
</template>

<style lang="scss" scoped></style>
